import React, { Component } from "react";
import Taro from '@tarojs/taro';
import { View,Image,Text,Button,Input } from '@tarojs/components';
import { AtTabs, AtTabsPane,AtButton,AtCountdown} from 'taro-ui';
import './indexmiaosha.scss'
class Indexmiaosha extends Component {
    constructor () {
        super(...arguments)
        this.state = {
          current: 0,
          isOpen:false,
          listdetail:[]
        }
      }
      onTimeUp () {
        Taro.showToast({
          title: '时间到',
          icon: 'success',
          duration: 2000
        })
      }
      handleClick (value) {
        this.setState({
          current: value
        })
      }
      handleClose=()=>{
        this.setState({isOpen:false})
    }
    handleCancel=()=>{
        this.setState({isOpen:false})
    }
    handleConfirm=()=>{
        this.setState({
            isOpen:false
        })
    }
    gotodorddet(){
        Taro.navigateTo({
            url: './../../pages/mineorderdet/mineorderdet'
          })
    }
      componentDidMount() {
        this.getListDetail();
      }
      getListDetail(){
        Taro.request({
          method:"POST",
          url: 'http://123.57.67.148:3000/mock/573/newproduct',
          data: {
            listdetail: 'listdetail',
            bar: 10
          },
          header: {
            'content-type': 'application/json'
          }
        })
          .then(res =>{
            this.setState({
              listdetail:res.data.newproduct
            })
            console.log(res.data)
          })
      }
    render () {
      return <View className='container'>
          <AtTabs
  current={this.state.current}
  scroll
  tabList={[
    { title: '全部' },
    { title: '正在进行' },
    { title: '即将开始' },
    { title: '已售罄' }
  ]}
  onClick={this.handleClick.bind(this)}>
    <AtTabsPane current={this.state.current} index={0}>
    <View style='font-size:18px'><View className='order'>
{this.state.listdetail.map((item, index) => {
          console.log(item)
              return (
                  <View className='ordercontent' key={index}>
                    <View className='ordermid1'>
                      
                        <View className='orderimg'>
                            <Image src={item.imgurl} style='height:150px;width:150px'></Image>
                        </View>
                           <View>
                          还剩<AtCountdown
        isCard
        minutes={1}
        seconds={10}
      />
                              <View className='ordername'>
                             <Text>{item.name}</Text>   
                           </View>
                           <View className='oderimgtext'>
                               <Text style='font-size:25px'>￥1</Text>
                               <Text className='oderimgtext1'>剩余11件</Text>
                               <AtButton className='bottompay' onClick={this.gotodorddet}>马上抢</AtButton>
                          </View> 
                           </View>
                       
                    </View>
                  </View>
              )
            })}
</View></View>
  </AtTabsPane>
  <AtTabsPane current={this.state.current} index={1}>
    <View style='font-size:18px;text-align:center;height:100px;'>标签页二的内容</View>
  </AtTabsPane>
  <AtTabsPane current={this.state.current} index={2}>
    <View style='font-size:18px;text-align:center;height:100px;'>标签页三的内容</View>
  </AtTabsPane>
  <AtTabsPane current={this.state.current} index={3}>
    <View style='font-size:18px;text-align:center;height:100px;'>标签页四的内容</View>
  </AtTabsPane>
  
</AtTabs>
          </View>
          
    }
  }
  
  export default Indexmiaosha